<template>
  <el-card>
    <el-table
      :data="tableData"
      :header-cell-style="{ 'text-align': 'center', 'font-size': '14px' }"
      :cell-style="{ 'text-align': 'center' }"
      style="width: 100%; height: 71vh"
    >
      <el-table-column fixed prop="username" label="账号" />
      <el-table-column prop="password" label="密码" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="address" label="地址" show-overflow-tooltip />
      <el-table-column prop="license" label="执照编号" show-overflow-tooltip />
      <el-table-column prop="atime" label="申请时间" show-overflow-tooltip />
      <el-table-column prop="status" label="状态">
        <template #default="props">
          <el-tag :type="props.row.status === 1 ? 'primary' : 'danger'">
            {{ props.row.status == 1 ? "待审核" : "已拒绝" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="props">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleClick(props.row.username)"
          >
            {{
              props.row.status === 1
                ? "审核"
                : props.row.status === 3
                ? "修改"
                : null
            }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogRegisterVisible"
      title="账号注册申请"
      width="500px"
    >
      <el-form :model="registerMsg" class="registerMsg">
        <el-form-item label="账号:" prop="username">
          <el-input v-model="registerMsg.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="name">
          <el-input v-model="registerMsg.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话:" prop="telephone">
          <el-input v-model="registerMsg.telephone" disabled></el-input>
        </el-form-item>
        <el-form-item label="地址:" prop="address">
          <el-input v-model="registerMsg.address" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="registerMsg.email" disabled></el-input>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idcard">
          <el-input v-model="registerMsg.idcard" disabled></el-input>
        </el-form-item>
        <el-form-item label="执照编号:" prop="license">
          <el-input v-model="registerMsg.license" disabled></el-input>
        </el-form-item>
        <el-form-item label="账号状态:">
          <el-select v-model="registerMsg.status" placeholder="请选择是否签约">
            <el-option label="通过" value="0" />
            <el-option label="待审核" value="1" />
            <el-option label="拒绝" value="3" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogRegisterVisible = false">关闭</el-button>
          <el-button type="primary" @click="editRegisterStatus()">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script>
import { applyList, editRegister } from "@/api/login";
export default {
  data() {
    return {
      registerMsg: {},
      dialogRegisterVisible: false,
      tableData: [],
    };
  },
  created() {
    this.queryApplyList();
  },
  methods: {
    queryApplyList() {
      applyList().then((res) => {
        this.tableData = res.data.data;
      });
    },
    handleClick(username) {
      // this.$message.success('审核成功')
      this.dialogRegisterVisible = true;
      for (let index = 0; index < this.tableData.length; index++) {
        if (this.tableData[index].username === username) {
          this.registerMsg = JSON.parse(JSON.stringify(this.tableData[index]));
          this.registerMsg.status = this.registerMsg.status.toString();
          break;
        }
      }
    },
    editRegisterStatus() {
      editRegister(this.registerMsg).then((res) => {
        this.$message.success("信息更新成功");
        this.dialogRegisterVisible = false;
        this.queryApplyList();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.blue {
  color: blue;
}

.red {
  color: red;
}

::v-deep .registerMsg .el-form-item__label {
  width: 105px;
}

.registerMsg .el-input {
  width: 300px;
}
</style>
